<template>
	<list :bounce="false" class="y-flex y-flex-1">
		<header>
			<form-header text="基础信息"></form-header>
		</header>
		<cell v-for="(key, i) in Object.keys(baseForm)">
			<form-item
			v-if="key != 'isAdult' || isAdult"
			v-model="baseForm[key]"
			:type="baseInfo[key].type"
			:label="baseInfo[key].label"
			:required="baseInfo[key].required"
			:disabled="disabled"
			@selectIcon="handleIconSelect(key)"></form-item>
		</cell>
		<header>
			<form-header text="动态链接（部分网站链接会动态变化,使用请求获取最新链接）"></form-header>
		</header>
		<cell v-for="(key, i) in Object.keys(dynamicForm)">
			<form-item
			closeable
			v-model="dynamicForm[key]"
			:type="dynamic[key].type"
			:label="dynamic[key].label"
			:required="dynamic[key].required"
			:disabled="disabled"
			@close="handleClose('dynamicForm', key)"></form-item>
		</cell>
		<cell>
			<view class="y-flex y-row y-align-center y-justify-center pt-30 pb-30" @tap="handleDynamic">
				<com-icon name="add" size="40" :color="skinColor.color_1"></com-icon>
				<text class="fs-30" :style="{color: skinColor.color_1}">添加请求属性</text>
			</view>
		</cell>
		<icon-select ref="iconSelect"></icon-select>
		<options-select ref="optionsSelect"></options-select>
	</list>
</template>

<script>
	import appMixin from '@/assets/mixin/app.js'
	import IconSelect from './components/icon.vue'
	import FormHeader from './components/Header.vue'
	import FormItem from './components/FormItem.vue'
	import OptionsSelect from './components/options.vue'
	import { Dynamic, Base } from '@/assets/js/interface.js'
	export default {
		mixins: [appMixin],
		components: {IconSelect, FormItem, FormHeader, OptionsSelect},
		props: {
			disabled: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			baseInfo () {
				return Base
			},
			baseData () {
				const obj = {}
				Object.keys(this.baseInfo).forEach(key => {
					obj[key] = this.baseInfo[key].value
				})
				return obj
			},
			dynamic () {
				return Dynamic
			},
			isAdult () {
				return this.$store.getters['setting/GET_ADULT']
			}
		},
		data () {
			return {
				baseForm: {},
				dynamicForm: {}
			}
		},
		created() {
			this.baseForm = this.baseData
		},
		methods: {
			onBackPress () {
				if ( this.$refs.iconSelect.visible ) {
					this.$refs.iconSelect.hide()
					return true
				}
				if ( this.$refs.optionsSelect.visible ) {
					this.$refs.optionsSelect.hide()
					return true
				}
				return false
			},
			setData (jsonData) {
				Object.keys(this.baseForm).forEach(key => {
					this.$set(this.baseForm, key, jsonData[key])
				})
				const dynamic = jsonData.dynamic || {}
				Object.keys(dynamic).forEach(key => {
					this.dynamicForm[key] = dynamic[key]
				})
			},
			handleClose (formName, k) {
				this[formName] = this.$utils.deleteProperty(this[formName], k)
			},
			handleIconSelect (key) {
				uni.hideKeyboard()
				this.$refs.iconSelect.select({
					success: res => {
						this.$set(this.baseForm, key, res.name)
					}
				})
			},
			handleDynamic () {
				if ( this.disabled ) return
				this.$refs.optionsSelect.select({
					title: '选择添加的属性',
					actions: Object.keys(this.dynamic).filter(key => Object.keys(this.dynamicForm).indexOf(key) == -1).map(key => this.dynamic[key].label),
					success: res => {
						const keys = Object.keys(this.dynamic)
						const index = keys.findIndex(key => this.dynamic[key].label == res.detail.label )
						const key = keys[index]
						this.$set(this.dynamicForm, key, this.dynamic[key].value)
					}
				})
			}
		}
	}
</script>

<style>
</style>